<!-- subpkg_consult/order_list/components/order-list.vue -->
<script lang="ts" setup>
	import { ref } from 'vue'
	import { orderListApi } from '@/apis/order'
	import { OrderItem } from '@/types/order.d.ts'
	const props = defineProps<{ type: string }>()

	// 页码 页容量
	let current = 1
	const pageSize = 6

	// 总页数 总条数
	let pageTotal = 0
	let total = 0

	// 加载状态变量
	const status = ref('more')

	// 数组
	const items = ref([] as OrderItem[])
	const getOrderList = async () => {
		status.value = 'loading' // 加载中
		const res = await orderListApi({
			current: current.toString(),
			pageSize: pageSize.toString(),
			type: props.type,
		})
		// console.log(res)
		pageTotal = res.pageTotal
		total = res.total
		items.value.push(...res.rows)
		// 判断是否还有更多数据
		if (current >= pageTotal) {
			status.value = 'nomore' // 木有了
		} else {
			status.value = 'more' // 还有
		}
	}
	getOrderList()

	// 加载更多
	const loadMoreFunc = () => {
		console.log('触底啦~~')
		// 是否还有更多
		// 木有了 （不用继续）
		if (current >= pageTotal) {
			return
		}
		// 还有（页码累加）
		current++
		getOrderList()
	}

	// 下拉状态
	const refreshing = ref(false)
	const refreshDataFunc = async () => {
		// 开启刷新
		refreshing.value = true
		// 清空
		items.value = []
		// 从第一页开始
		current = 1
		// 获取数据
		await getOrderList()
		refreshing.value = false
	}
</script>

<template>
	<scroll-view
		@scrolltolower="loadMoreFunc"
		refresher-enabled
		:refresher-triggered="refreshing"
		refresher-background="#f6f6f6"
		class="uni-scroll-view"
		scroll-y
		@refresherrefresh="refreshDataFunc"
	>
		<view class="consult-list">
			<view v-for="item in items" :key="item.id" class="consult-list-item">
				<view class="consult-header">
					<view class="label">
						<image class="doctor-avatar" src="/static/uploads/doctor-avatar.jpg" />
						<text>{{ item.docInfo.name }}</text>
					</view>
					<text class="status color-1">{{ item.statusValue }}</text>
				</view>

				<navigator
					class="consult-body"
					hover-class="none"
					url="/subpkg_consult/order_detail/index"
				>
					<uni-list :border="false">
						<uni-list-item
							:border="false"
							title="病情描述"
							right-text="腹痛腹泻  胃部有些痉挛"
						/>
						<uni-list-item
							:border="false"
							title="价格"
							:right-text="`¥ ${item.payment}`"
						/>
						<uni-list-item
							:border="false"
							title="创建时间"
							:right-text="item.createTime"
						/>
					</uni-list>
				</navigator>

				<view class="consult-footer">
					<button class="uni-button minor">取消订单</button>
					<button class="uni-button">继续支付</button>
				</view>
			</view>

			<!-- 加载状态 -->
			<uni-load-more
				:status="status"
				color="#C3C3C5"
				:icon-size="16"
				:content-text="{
					contentdown: '上拉显示更多',
					contentrefresh: '数据正在加载中',
					contentnomore: '没有更多数据了',
				}"
			/>
		</view>
	</scroll-view>
</template>

<style lang="scss">
	@import './index.scss';
</style>
